<template>
	<scroll-view scroll-y="true" :class="'page go_'+goClass" style="margin-top:-30rpx;">
		<image class="iwidth" style="height:1500rpx;" :src="imgPath+'/static/big/bg2.jpg'" mode="scaleToFill"></image>
		<!-- 文明地图显示区域 START -->
		<view class="map_view">
			<image class="iwidth" style="height:620rpx;" :src="imgPath+'/static/big/vbg.jpg'" mode="scaleToFill"></image>
			<!-- 文明显示区域 START -->
			<!-- 区域地图 START -->
			<view class="wming wm1">
				<image class="iwidth" :src="imgPath+'/static/big/wm1'+(wm1Data.status==2?'':'d')+'.png'" mode="widthFix"></image>
			</view>
			<view class="wming wm2">
				<image class="iwidth" :src="imgPath+'/static/big/wm2'+(wm2Data.status==2?'':'d')+'.png'" mode="widthFix"></image>
			</view>
			<view class="wming wm3">
				<image class="iwidth" :src="imgPath+'/static/big/wm3'+(wm3Data.status==2?'':'d')+'.png'" mode="widthFix"></image>
			</view>
			<view class="wming wm4">
				<image class="iwidth" :src="imgPath+'/static/big/wm4'+(wm4Data.status==2?'':'d')+'.png'" mode="widthFix"></image>
			</view>
			<!-- 区域地图 END -->
			<!-- 区域名字 START -->
			<view class="wname wm1" @click="showPopUp('wm1p')">
				<image class="iwidth" src="/static/img/wm1_a.png" mode="widthFix"></image>
				<image v-if="isFirst" class="tip bling" src="/static/img/tips_1.png" mode="widthFix"></image>
			</view>
			<view class="wname wm2" @click="showPopUp('wm2p')">
				<image class="iwidth" src="/static/img/wm2_a.png" mode="widthFix"></image>
				<image v-if="isFirst" class="tip bling delay2" src="/static/img/tips_1.png" mode="widthFix"></image>
			</view>
			<view class="wname wm3" @click="showPopUp('wm3p')">
				<image class="iwidth" src="/static/img/wm3_a.png" mode="widthFix"></image>
				<image v-if="isFirst" class="tip bling" src="/static/img/tips_1.png" mode="widthFix"></image>
			</view>
			<view class="wname wm4" @click="showPopUp('wm4p')">
				<image class="iwidth" src="/static/img/wm4_a.png" mode="widthFix"></image>
				<image v-if="isFirst" class="tip bling delay4" src="/static/img/tips_1.png" mode="widthFix"></image>
			</view>
			<!-- 区域名字 END -->
			<!-- DV区域 START -->
			<image v-if="wm1Data.status==2" @click="dvBtn(wm1Data)" class="dv dv1 breath" :src="imgPath+'/static/big/dv1.png'" mode="widthFix"></image>
			<image v-if="wm2Data.status==2" @click="dvBtn(wm2Data)" class="dv dv2 breath delay4" :src="imgPath+'/static/big/dv2.png'"  mode="widthFix"></image>
			<image v-if="wm3Data.status==2" @click="dvBtn(wm3Data)" class="dv dv3 breath delay1" :src="imgPath+'/static/big/dv3.png'"  mode="widthFix"></image>
			<image v-if="wm4Data.status==2" @click="dvBtn(wm4Data)" class="dv dv4 breath delay2" :src="imgPath+'/static/big/dv4.png'"  mode="widthFix"></image>
			<!-- DV区域 END -->
			<!-- 文明显示区域 END -->
			<YunCeng></YunCeng>
		</view>
		<!-- 文明地图显示区域 END -->
		<!-- 规则按钮 START -->
		<image class="rule_btn" @click="showPopUp('wrule')" src="/static/img/btn_1.png" mode="widthFix"></image>
		<!-- 规则按钮 END -->
		<!-- X行走总里程 START -->
		<view class="distance">
			<text>{{mileageTotal}}</text><!-- <u-count-to :start-val="0" :end-val="mileageTotal" :decimals="1" :duration="5000" :use-easing="false"></u-count-to> -->KM
		</view>
		<!-- X行走总里程 END -->
		<!-- 文明列表 START -->
		<view class="wmlist">
			<view class="wmitem wm1">
				<image class="wmimg" src="/static/img/wm1.png" mode="scaleToFill"></image>
				<view :class="['wmbar','wmb_'+(wm1Data.progress<40?'s':'b')]">
					<u-line-progress height="25" active-color="#f0980d" :percent="wm1Data.progress"></u-line-progress>
				</view>
			</view>
			<view class="wmitem wm2">
				<image class="wmimg" src="/static/img/wm2.gif" mode="scaleToFill"></image>
				<view :class="['wmbar','wmb_'+(wm2Data.progress<40?'s':'b')]">
					<u-line-progress height="25" active-color="#6fc650" :percent="wm2Data.progress"></u-line-progress>
				</view>
			</view>
			<view class="wmitem wm3">
				<image class="wmimg" src="/static/img/wm3.png" mode="scaleToFill"></image>
				<view :class="['wmbar','wmb_'+(wm3Data.progress<40?'s':'b')]">
					<u-line-progress height="25" active-color="#369eff" :percent="wm3Data.progress"></u-line-progress>
				</view>
			</view>
			<view class="wmitem wm4">
				<image class="wmimg" src="/static/img/wm4.png" mode="scaleToFill"></image>
				<view :class="['wmbar','wmb_'+(wm4Data.progress<40?'s':'b')]">
					<u-line-progress height="25" active-color="#ff5847" :percent="wm4Data.progress"></u-line-progress>
				</view>
			</view>
		</view>
		<!-- 文明列表 END -->
		<!-- TOP3 start -->
		<view class="toplist">
			<view v-for="(item,index) in top3List" :key="index" class="titem">
				<image class="iwidth" src="/static/img/ico_1.png" mode="widthFix"></image>
				<u-avatar size="64" :src="item.avatar"></u-avatar>
				<view class="far ellipsis"><text>{{item.mileage}}</text>KM</view>
				<view class="nick ellipsis">{{item.nickname}}</view>
			</view>
		</view>
		<!-- TOP3 end -->
		<view class="ubtns">
			<button class="share" open-type="share"></button>
			<image class="ubtn" src="/static/img/btn_2.png" mode="widthFix"></image>
			<image @click="myBtn()" class="ubtn breath" src="/static/img/btn_3.png" mode="widthFix"></image>
		</view>
		<!-- 文明简介弹窗  START-->
		<u-popup v-model="popBool" mode="center" :mask-close-able="false">
			<view class="pwrap">
				<image class="iwidth" :src="imgPath+'/static/big/'+popVal+'.png'" mode="widthFix"></image>
				<image @click="closePopUp" class="close_btn" src="/static/close.png" mode="widthFix"></image>
			</view>
		</u-popup>
		<!-- 文明简介弹窗  END-->
		<!-- 视频弹窗  START-->
		<u-popup v-model="videoBool" mode="center" :mask-close-able="false">
			<view class="pwrap pwrap2">
				<view class="vwrap">
					<image class="abs full pimg" src="/static/img/v_bg.png" mode="scaleToFill"></image>
					<video object-fit="contain" class="dvideo" id="descVideo" :src="videoSrc" :poster="videoCover" controls></video>
				</view>
				<image @click="closeVideo" class="close_btn" src="/static/close.png" mode="widthFix"></image>
			</view>
		</u-popup>
		<!-- 视频弹窗  END-->
		<BgMusic ref="bgMusic"/>
	</scroll-view>
</template>

<script>
	import user from '@/src/data/user'
	import platform from '@/src/platform'
	import http from '@/src/http'
    import YunCeng from '@/components/yun-ceng.vue'
	export default {
		options: { styleIsolation: 'shared' },
		components:{
			YunCeng
		},
		data() {
			return {
				isFirst:false,//是否首次进入
				videoBool:false,
				videoSrc:'',
				videoCover:'',
				popBool:false,
				popVal:'',//弹窗图片名字
				goClass:'',
				/***************************************/
				civilizations:[],
				wm1Data:{},
				wm2Data:{},
				wm3Data:{},
				wm4Data:{},
				walkUser:{},
				top3List:[],
				mileageTotal:0,
				isWinner:false,
				isSubscribe:false,
				scrollTop:0
			}
		},
		onLoad(options) {
			wx.bgMusic.play();
		},
		onShow() {
			this.initShow(true);
		},
		methods: {
			async initShow(reload=false){
				let walkData = await platform.getWalkData(reload);
				this.civilizations = walkData.civilizations;
				this.wm1Data = _.findWhere(this.civilizations,{id:1});
				this.wm2Data = _.findWhere(this.civilizations,{id:2});
				this.wm3Data = _.findWhere(this.civilizations,{id:3});
				this.wm4Data = _.findWhere(this.civilizations,{id:4});
				this.walkUser = walkData.walkUser;
				this.top3List = walkData.top3;
				this.mileageTotal = walkData.mileageTotal;
				this.isWinner = walkData.isWinner;
				this.isSubscribe = walkData.isSubscribe;
				/*****************************************************/
				this.shareTitle = '当前光子人共走了'+this.mileageTotal+'km,快来一起加入LightSpeed Walk吧';
				this.shareImage = this.imgPath + '/static/big/activeA.jpg';

				/****************************************/
				this.isFirst = wx.getStorageSync('isFirst')==1?false:true;
				wx.setStorageSync('isFirst',1);
			},
			showPopUp(value){
				this.popVal = value;
				this.popBool = true;
			},
			closePopUp(){
				this.popBool = false;
			},
			closeVideo(){
				this.videoBool = false
				this.$refs.bgMusic.play();
			},
			dvBtn(data){
				this.videoSrc= data.videoUrl;
				this.videoCover = data.videoCover;
				this.videoBool = true;
				this.$refs.bgMusic.stop();
			},
			myBtn(){
				let civilizationId = this.walkUser.civilizationId;
				this.goClass = 'wm' + civilizationId;
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/activeA/self/self?from=main&cvid='+civilizationId
					})
					setTimeout(()=>{
						 this.goClass = '';
					},300)

				},1200);
			}
		},
		onShareAppMessage() {
			http.writeLog({type:2});
			return {
				title:this.shareTitle,
				imageUrl:this.shareImage,
				path:'/pages/index?name=activeA'
			}
		},
		onShareTimeline() {
			http.writeLog({type:2});
			return {
				title:this.shareTitle,
				imageUrl:this.shareImage,
				path:'/pages/index?name=activeA'
			}
		}
	}
</script>

<style lang="scss" scoped>
@keyframes scaleAni{
  0%{transform:scale(1);}
  90%{transform:scale(10);}
  100%{
	  transform:scale(10);
	  opacity:0
  }
}
.page{
	&.go_wm1{
		background-color: #fff;
		transform-origin:48% 32%;
		animation:scaleAni 1s ease-in both;
	}
	&.go_wm2{
		background-color: #fff;
		transform-origin:81% 46%;
		animation:scaleAni 1s ease-in both;
	}
	&.go_wm3{
		background-color: #fff;
		transform-origin:38% 52%;
		animation:scaleAni 1s ease-in both;
	}
	&.go_wm4{
		background-color: #fff;
		transform-origin:19% 45%;
		animation:scaleAni 1s ease-in both;
	}
}
.map_view{
	position: absolute;
	width: 715rpx;
	left:19rpx;
	top:23%;
	.wming{
		position: absolute;
		&.wm1{
			width:428rpx;
			left:22%;
			top:0%;
		}
		&.wm2{
			width:378rpx;
			left:46%;
			top:20%;
		}
		&.wm3{
			width:314rpx;
			left:21%;
			top:56%;
		}
		&.wm4{
			width:264rpx;
			left:0%;
			top:18%;
		}
	}
	.dv{
		position: absolute;
		width:70rpx;
		&.dv1{
			left:69%;
			top:10%;
		}
		&.dv2{
			left:77%;
			top:67%;
		}
		&.dv3{
			left:18%;
			top:72%;
		}
		&.dv4{
			left:23%;
			top:40%;
		}
	}
	.wname{
		position: absolute;
		width:135rpx;
		.tip{
			position: absolute;
			width:200rpx;
			top:110%;
			left:0;
		}
		&.wm1{
			left:65%;
			top:3%;
		}
		&.wm2{
			left:72%;
			top:78%;
		}
		&.wm3{
			left:13%;
			top:84%;
		}
		&.wm4{
			left:18%;
			top:33%;
		}
	}
}
.rule_btn{
	position: absolute;
	width:82rpx;
	right:10rpx;
	top:256rpx;
}
.pwrap{
	width:600rpx;
	.close_btn{
		width:100rpx;
		display:block;
		margin:20rpx auto 0;
	}
	&.pwrap2{
		width:750rpx;
		.vwrap{
			position: relative;
			height: 433rpx;
			//padding-top:20rpx;
		}
		.dvideo{
			position: relative;
			display: block;
			width: 750rpx;
			margin:0 auto 0;
			height:433rpx;
		}
	}
}
.distance{
	position: absolute;
	width:43%;
	left:0;
	text-align: center;
	top:75%;
	color:#000;
	font-weight: 600!important;
	font-size: 40rpx;
	text{
		font-weight: 600!important;
		font-size: 60rpx!important;
		color:#369eff!important;
		margin-right:10rpx;
	}
}

.wmlist{
	position: absolute;
	top:996rpx;
	width:400rpx;
	left:350rpx;
	.wmitem{
		position: relative;
		height:54rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.wmimg{
			position: relative;
			width:144rpx;
			height:48rpx;
			top:12rpx;
			z-index: 2;
		}
		.wmbar{
			position: relative;
			margin-left:-10rpx;
			width:245rpx;
			height: 25rpx;
			&.wmb_s /deep/ .u-active{
				justify-content: flex-end;
				text{
					color:#000;
					position: relative;
					left:40rpx;
				}
			}
		}
		/deep/ .u-progress{
			border:2rpx solid #000;
			.u-active{
				//color:#000;
			}
		}
	}
}
.toplist{
	position: absolute;
	width:628rpx;
	height:118rpx;
	left:122rpx;
	top:1242rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.titem{
		position: relative;
		width:190rpx;
		/deep/ .u-avatar{
			position: absolute;
			left:4rpx;
			top:6rpx;
		}
		.far{
			position: absolute;
			left:70rpx;
			width:117rpx;
			top:4rpx;
			color:#000;
			font-size: 20rpx;
			text-align: center;
			text{
				font-size: 28rpx;
				color:#369eff;
				margin-right:5rpx;
			}
		}
		.nick{
			position: absolute;
			left:70rpx;
			width:117rpx;
			bottom:2%;
			color:#000;
			font-size: 20rpx;
			text-align: center;
		}
	}
}
.ubtns{
	position: fixed;
	width:750rpx;
	height:137rpx;
	z-index: 2;
	background-color:#369eff;
	left:0;
	bottom:0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.ubtn{
		position: relative;
		width:290rpx;
	}
	.share{
		position: absolute;
		opacity:0;
		z-index: 2;
		width:50%;
		top:0;left:0;
		height: 100%;
	}
}
</style>
